<template>
  <view>
    <view class="searchPP">
      <image
        @click="goBackM"
        style="width: 0.6rem; height: 1rem; padding: 0rem 0.5rem 0rem 0rem"
        src="../../style/image/cargo/leftarow.jpg"
        alt=""
      />
      <view class="searchP">
        <view class="search" :style="{ width: '100%' }">
          <u-search placeholder="请输入您的代理名称或电话号码" shape="round" v-model="keyword" :show-action="false" @search="searchProxy"></u-search>
        </view>
      </view>
    </view>

    <view class="myAgentC">  </view>

    <u-index-list :scrollTop="scrollTop">
		
		<view v-if="proxyFatherDic">
		  <view @click="clickPhone(proxyFatherDic.phone)"  class="angent-item">
		      <view class="angent-item-child">
		      <u-avatar size='70' :src="proxyFatherDic.headImg" mode="circle"></u-avatar>
		          <view style="font-size: 0.78rem;font-family: PingFang SC;font-weight: 400;margin-left: 1rem;color: #000000;">{{proxyFatherDic.nickName}}</view>
		          <image style="width: 1rem;height:1rem;margin: 0rem 1rem;" src="../../style/image/my/A16.png" alt="">
		          <view style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #FF961C;" >{{proxyFatherDic.roleName}}</view>
		      </view>
		  </view>
		</view>
		
      <view @click="clickPhone(item.phone)" v-for="(item, index) in proxyLists" :key="index">
        <u-index-anchor :index="item.nickInitial" />
        <view  class="angent-item">
            <view class="angent-item-child">
            <u-avatar size='70' :src="item.headImg" mode="circle"></u-avatar>
                <view style="font-size: 0.78rem;font-family: PingFang SC;font-weight: 400;margin-left: 1rem;color: #000000;">{{item.nickName}}</view>
                <image style="width: 1rem;height:1rem;margin: 0rem 1rem;" src="../../style/image/my/A16.png" alt="">
                <view style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #FF961C;" >{{item.roleName}}</view>
            </view>
        </view>
      </view>
	  <u-empty style="margin-top:0rem;" v-if="proxyLists.length==0" text="暂无数据" mode="data"></u-empty>
	  
	  <view v-if="proxyLists.length>0" style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #000000;
	  text-align: center;padding: 0.3rem;background-color: #f5f5f5;">暂无更多代理~</view>
	  
	  
	  <!-- <view  class="angent-item" style="background-color: gray;">
	      <view style="font-size: 0.58rem;font-family: PingFang SC;font-weight: 200;color: #000000;">暂无更多代理~   列表底部提示</view>
	  </view> -->
	  
    </u-index-list>
  </view>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import { findProxyList } from "../../utils/uniApi";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public keyword = "";//搜索关键字
  public proxyFatherDic:any='';
  public proxyLists:any = [];

  scrollTop = 0;


  created() {
	  
  }
  
  onHide(){
	  uni.hideLoading();
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
	this.findProxyList('');
  }
  
  
  //搜索框
  searchProxy(value:any){
	  this.keyword = value
	  this.findProxyList(this.keyword);
  }
  //下拉刷新
  onPullDownRefresh() {
      setTimeout(function () {
        uni.redirectTo({
          url: "../../pages/myAgent/index",
        });
        uni.stopPullDownRefresh();
      }, 1000);
  }
  
  //拉取我的代理数据
  findProxyList(key:any){
  	  uni.showLoading({
  	  	title: '加载中'
  	  });
  	  let params = {
  		keyword:key,
  		userId:uni.getStorageSync("userId") == ""? "": parseInt(uni.getStorageSync("userId")),
  	  };
  	  findProxyList(params).then((res: any) => {
  	      if(res.data.code==200){
			  if(this.proxyLists.length>0){//搜索时清除已有数据  如果有分页 需在考虑
				  this.proxyLists = [];
			  }
			  var dic:any = res.data.data;
			  if(dic && dic.proxyUser){
				  this.proxyFatherDic = dic.proxyUser;
			  }
			  if(dic.userList.length>0){
				  var list:any=[];
				  for( var i=0 ;i<dic.userList.length;i++){
					  var item = dic.userList[i];
					  if(item.nickInitial == '' || item.nickInitial == null){
						  list.push(item);
					  }else{
						  this.proxyLists.push(item);
					  }
				  }
				  if(list.length>0){
					  this.proxyLists = this.proxyLists.concat(list);
				  }
			  }
			  uni.hideLoading();
  	      }else{
			  uni.hideLoading();
			  uni.showToast({
					title: '请求数据失败',
					icon: 'none',
					duration: 2000
				});
  	      }
  	  });
  }
  
  //调起系统打电话功能
  clickPhone(phone:any){
	  if(phone){
		uni.makePhoneCall({
		   phoneNumber:phone,// 手机号
		   success: (res) => {// 成功回调
			// console.log('调用成功!') 
		   },
		   fail: (res) => {// 失败回调
			// console.log('调用失败!')
		   }
		});
	  }
  }

  goBackM(){
	  uni.navigateBack({
	     delta: 1,
	  });
  }
}
</script>

<style  lang="scss"  scoped>
.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.angent-item-child{
    width: 70%;
display: flex;
padding: 0.5rem;
align-items: center;
}

</style>